<template>
  <div class="container">
    <el-card shadow style="margin-top: 10px">
      <!-- 头部搜索区域 -->
      <el-row type="flex" justify="space-between">
        <el-col>
          <el-form :inline="true" :model="page" ref="searchForm">
            <el-form-item label="关键字">
              <el-input
                v-model="page.keyword"
                placeholder="根据文章标题搜索"
              ></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="page.state" placeholder="请选择">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="clearFind">清除</el-button>
              <el-button type="primary" @click="search">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>

        <el-col :span="4">
          <el-row type="flex" justify="end">
            <el-button type="success" icon="el-icon-edit" @click="addBtn"
              >新增技巧</el-button
            >
          </el-row>
        </el-col>
      </el-row>

      <!-- 工具栏 -->
      <el-alert
        :title="`数据一共${page.counts}条`"
        type="info"
        show-icon
        :closable="false"
      ></el-alert>

      <!-- 表格展示 -->
      <el-table
        :data="tableData"
        :header-cell-style="{ background: '#f4f4f5' }"
        style="width: 100%; margin-top: 15px"
      >
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="title" label="文章标题">
          <template slot-scope="scope">
            <span>{{ scope.row.title }}</span>
            <i
              v-if="scope.row.videoURL"
              class="el-icon-film"
              style="color: #0000ff"
            ></i>
          </template>
        </el-table-column>
        <el-table-column prop="visits" label="阅读数"> </el-table-column>
        <el-table-column prop="username" label="录入人"> </el-table-column>
        <el-table-column prop="createTime" label="录入时间">
          <template slot-scope="scope"
            >{{ new Date(scope.row.createTime) | parseTime }}
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.state === 1">已启用</span>
            <span v-else>已禁用</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="previewBtn(scope.row.id)"
              >预览</el-button
            >
            <el-button
              @click="disableClick(scope.row)"
              type="text"
              size="small"
              >{{ scope.row.state === 0 ? '启用' : '禁用' }}</el-button
            >
            <el-button
              @click="editHandleClick(scope.row)"
              type="text"
              size="small"
              :disabled="scope.row.state === 0 ? true : false"
              >修改</el-button
            >
            <el-button
              @click="DeleteHandleClick(scope.row)"
              type="text"
              size="small"
              :disabled="scope.row.state === 0 ? true : false"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" justify="end">
        <el-pagination
          background
          style="margin-top: 30px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="page.pagesize"
          layout="prev, pager, next,sizes, jumper"
          :total="page.counts"
        >
        </el-pagination>
      </el-row>
    </el-card>
    <!-- 预览文章弹层 -->
    <el-dialog
      title="预览文章"
      :visible.sync="preDiaVisible"
      @close="preDiaVisible = false"
      width="80%"
    >
      <el-row style="margin: -15px 0px 0px">
        <h2>{{ preDate.title }}</h2>
      </el-row>
      <el-row style="margin: -10px 10px 10px">
        <span style="margin-left: 10px; font-size: 10px">{{
          preDate.createTime | parseTime
        }}</span>
        <i class="el-icon-view" style="margin-left: 10px"></i>
        {{ preDate.visits }}
      </el-row>
      <el-row style="border-top: 1px dashed #ccc">
        <div
          style="background-color: #f5f5f5; padding: 15px 10px"
          v-html="preDate.articleBody"
        >
          {{ preDate.articleBody }}
        </div>
      </el-row>
    </el-dialog>

    <!-- 修改和新增文章弹层 -->
    <ArticlesAdd
      ref="articlesAdd"
      @addArticle="addArticle"
      @editArticle="editArticle"
      @getArticlesList="getArticlesList"
      :dialogVisible.sync="dialogVisible"
    />
  </div>
</template>

<script>
import ArticlesAdd from '../components/articles-add.vue'
import {
  list,
  changeState,
  add,
  update,
  remove,
  detail
} from '@/api/hmmm/articles'

export default {
  components: { ArticlesAdd },
  data () {
    return {
      // // 搜索表单数据对象
      // searchForm: {
      //   keyword: '',
      //   state: null
      // },
      page: {
        keyword: '',
        state: null,
        counts: 0, // 总记录数
        page: 1, // 当前页数
        pagesize: 10 // 页大小
      },
      // 展示表单数据
      tableData: [],
      dialogVisible: false, // 控制新增弹层展示
      // editDialogVisible: false, // 编辑弹层是否展示
      preDiaVisible: false, // 预览弹层是否展示
      // 预览弹层数据
      preDate: {}
    }
  },
  created () {
    this.getArticlesList()
  },
  methods: {
    // 新增技巧
    addBtn () {
      this.$refs.articlesAdd.ruleForm = {}
      this.dialogVisible = true
    },
    // 获取文章列表数据
    async getArticlesList () {
      const { data } = await list({ ...this.page })
      // console.log(data)
      this.tableData = data.items
      this.page.counts = data.counts
      this.page.pagesize = data.pagesize - 0
      this.page.page = data.page - 0
    },
    // 搜索
    async search () {
      const { data } = await list({ ...this.page })
      console.log(data)
      this.tableData = data.items
      this.page.counts = data.counts
      this.page.pagesize = data.pagesize - 0
      this.page.page = data.page - 0
      // this.getArticlesList()
    },
    // 清除
    clearFind () {
      // this.page = {}
      this.page.keyword = ''
      this.page.state = null
    },

    // 操作：预览 禁用 修改 删除
    async previewBtn (id) {
      const { data } = await detail({ id: id })
      // console.log(data);
      this.preDate.articleBody = data.articleBody
      this.preDate = data
      this.preDiaVisible = true
    },

    async disableClick (row) {
      // console.log(row)
      let state = 1
      if (row.state === state) {
        state = 0
      }
      const { data: res } = await changeState({ id: row.id, state: state })
      if (res.success) {
        this.$message.success('操作成功！')
        row.state = state
      } else {
        this.$message.error('操作失败！')
      }
      // // this.page.state = null
      // this.getArticlesList()

      // this.$message.success('操作成功！')
    },

    // 编辑弹层
    editHandleClick (row) {
      // this.$refs.articlesAdd.showArticle(row.id)
      this.$refs.articlesAdd.ruleForm = { ...row }
      this.dialogVisible = true
    },

    // 编辑文章(父子通信)
    async editArticle (editFormDate) {
      // console.log(editFormDate);
      const data = await update({ ...editFormDate })
      if (data.status !== 200) {
        return this.$message.error('修改文章失败')
      }
      this.$message.success('修改文章成功')
      this.search()
    },
    // 添加文章（父子通信）
    async addArticle (editFormDate) {
      const data = await add({ ...editFormDate })
      if (data.status !== 200) {
        return this.$message.error('添加文章失败')
      }
      this.$message.success('添加文章成功')
      this.search()
    },

    async DeleteHandleClick (row) {
      const confirmResult = await this.$confirm(
        '此操作将永久删除该文章, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      const data = await remove({ id: row.id })
      if (data.status !== 200) {
        return this.$message.error('删除文章失败！')
      }
      // await this.getArticlesList()
      this.search()
      this.$message.success('删除文章成功！')
    },

    // 页面变化 条数 页数
    handleSizeChange (val) {
      this.page.pagesize = val
      // this.page.keyword = this.searchForm.keyword
      this.getArticlesList()
      // this.search()
    },
    handleCurrentChange (val) {
      this.page.page = val
      // this.page.keyword = this.searchForm.keyword
      this.getArticlesList()
      // this.search()
    }
  }
}
</script>

<style scoped lang="less"></style>
